<template>
	<view>
		<view class="box">
			<view class="shou">
				<view class="shou-box">
					<image src="../../static/sou.png" mode=""></image>
					<input @input="Waybill_lists" type="text" placeholder="请输入运单编号">
				</view>
			</view>
			<view class="wu" v-if="Waybill_lists_data.length==0">
				<image src="../../static/wu.png" style="width: 182px; height: 150px; " mode=""></image>
				<p>暂无数据</p>
			</view>
			<!-- 订单列表 -->
			<view class="ddlb" v-for="(time,index) in Waybill_lists_data" 
			
			@click="tzxx(time.id+'&all_freight_amount='+time.all_freight_amount
			+'&all_delivery_amount='+time.all_delivery_amount
			+'&all_advance_amount='+time.all_advance_amount
			+'&all_amount='+time.all_amount
			)"
			>
				<view class="dd">
					<view class="dd-top">
						<view class="dd-q">
							运单编号：{{time.waybill_sn  || ''}}
						</view>
						<view class="dd-p">
							查看详情
						</view>
					</view>

					<view class="dd-dd">
						<!-- 是否垫资 0 未垫资 1=垫资 -->
						<p>是否垫付：{{time.is_advance==0?'未垫资':'垫资'}}</p>
						<p>运费：{{time.all_freight_amount}}</p>
						<!-- 是否需要配送 0不需要 1=需要 -->
						<p>是否送货：{{time.is_delivery==0?'不需要':'需要'}}</p>
						<p>配送费：{{time.all_delivery_amount}}</p>
						<p>垫资金额：{{time.all_advance_amount}}</p>
						<p>合计：{{time.all_amount}}</p>
						<p>路由：{{getLineStr(time)}}</p>
					</view>

				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Waybill_lists_data:[],
				page: 1,
			}
		},
		onLoad() {
			this.Waybill_lists('');
		},
		onReachBottom() {
			this.page++;
			this.Waybill_lists('');
		},
		methods: {
			tzxx(x)
			{
				uni.navigateTo({
					url: "/pages/my/d_dingdanliebiao?id="+x
				});
			},
			//运单列表
			Waybill_lists(e)
			{	
				
				var a ='';
				if(e!='')
				{
					a =e.target.value;
				}
				
				console.log(a);
				let data = {
					type:"0",
					waybill_sn:a,
					page: this.page,
				}
				this.$rqt.Waybill_lists(data).then(res => {
					console.log(res);
					let data = res.data.data;
					 
					this.Waybill_lists_data = [...this.Waybill_lists_data, ...data]; 
					 
					 
				})
			},
			getLineStr(line){
				let linestr = '';
				console.log('line: ', line);
				let {json_line} = line;
				let json_line_arr = JSON.parse(json_line);
				let fields = json_line_arr.map(item => `${item.outlet_name}`).join("-");
				
				return fields;
			}
		}
	}
</script>

<style scoped>
	.wu{
		width: 100%;
		text-align: center;
		padding-top: 60px;
		color: #999999;
		font-size: 18px;
		line-height: 40px;
	}
	.shou {
		width: 100%;
		height: 60px;
		background: #1890FF;
		display: flex;
		align-items: center;
	}

	.shou-box {
		width: 355px;
		margin: 0 auto;
		height: 32px;
		background: #FAFAFA;
		border-radius: 40px;
		display: flex;
		align-items: center;
	}

	.shou-box>image {
		width: 15px;
		height: 15px;
		margin-left: 10px;
		margin-right: 10px;
	}

	/* 订单列表 */
	.ddlb {
		padding-bottom: 10px;
		width: 95%;
		margin: 0 auto;
	}

	.dd {
		margin-top: 12px;
		width: 100%;
		padding-bottom: 10px;
		background: #FFFFFF;
		box-shadow: 0px 0px 6px 0px rgba(204, 204, 204, 0.5);
		border-radius: 8px;
	}

	.dd-top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px dashed #CCCCCC;
	}

	.dd-q {
		font-size: 18px;
		font-weight: 500;
		margin-left: 20px;
		line-height: 50px;

	}

	.dd-p {
		font-size: 18px;
		color: #1890FF;
		line-height: 50px;
		margin-right: 20px;
	}

	.dd-dd {
		overflow: hidden;
		width: 90%;
		margin: 0 auto;
	}

	.dd-dd>p {
		line-height: 40px;
		float: left;
		width: 50%;
		font-size: 16px;
		font-weight: 400;
	}
</style>

<style>
	page {
		background: #F7F7F7;
	}
</style>
